<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>折叠面板</title>
    <style>
        #app{
            padding: 20px 0;
            width: 400px;
            border: 3px solid rgb(52, 138, 219);
            box-shadow: 3px 3px 10px rgb(0, 0 ,0 ,0.2);
            border-radius: 18px;
        }
        h3{
            text-align: center;
        }
        .box{
            margin: 0 auto;
            width: 320px;
            border: 1px solid #000;
        }
        .box .title{
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            height: 30px;
            border-bottom: 1px solid #000;
        }
        .box .title h4 {
            
            height: 30px;
            line-height: 30px;
            margin: 0;
        }

        .box .container p{
            margin: 0;
        }
    </style>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 目标 -->
    <!-- 
        点击展开或收起时, 把内容区域显示或者隐藏
     -->
    
     <div id="app">
        <h3>案例： 折叠面板</h3>
        <div class="box">
            <div class="title">
                <h4>芙蓉楼送辛渐</h4>
                <span @click="isShow = !isShow">{{isShow ? '收起' : '展开'}}</span>
            </div>
            <div class="container" v-show="isShow">
                <p>寒雨连江夜入吴，</p>
                <p>平民送客楚山孤。</p>
                <p>洛阳亲友如相问，</p>
                <p>一片冰心在玉壶。</p>
            </div>
        </div>
     </div>

     <script>
         var app = new Vue({
             el: "#app",
             data:{
                isShow: false
             },
             methods: {
             }
         })
     </script>
</body>
</html>